<template>
  <div class="shadowman-pages">
    <CmsFilmmakersFilter
      :class="{ 'component-selected': select === 'latestVideo' }"
      @click="handleClick('filterTabBar')"
      :selectText="{
        color: '#ff613f',
        fontSize: '14px',
        backgroundColor: 'rgba(255, 97, 63,0.1)',
        borderRadius: '4px',
        borderColor: 'rgba(255, 97, 63,0)'
      }"
      :text="{
        color: '#48494D',
        fontSize: '14px',
        backgroundColor: 'rgba(255, 255, 255,0)',
        borderRadius: '4px',
        borderColor: 'rgba(255, 255, 255,0)'
      }"
    />
    <CmsStarGrid
      :class="{ 'component-selected': select === 'moreList' }"
      @click="handleClick('moreList')"
      :text="{ color: '#000000' }"
      :type="1"
    />
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'
import CmsComponents from '@cms/components'
import type { ComponentKeys } from '@cms/h5-editor'

const { CmsFilmmakersFilter, CmsStarGrid } = CmsComponents

withDefaults(defineProps<{ type?: number; select?: ComponentKeys | undefined }>(), { type: 1 })

const emit = defineEmits<{
  (event: 'select', key: ComponentKeys): void
}>()

const handleClick = (key: ComponentKeys) => {
  emit('select', key)
}
</script>

<style scoped lang="less"></style>
